<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>个人财务管理</title>
  <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="./css/style.css">
</head>
<script src="./node_modules/@popperjs/core/dist/umd/popper.min.js"></script>
<script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

<body>
  <!-- 顶部导航栏 -->
  <nav class="navbar navbar-expand-sm navbar-light bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">个人财务管理</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown"
        aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul id="login-unlogin" class="navbar-nav ms-auto btn-group">
          <li class="nav-item">
            <a class="btn btn-light" href="pages/register.html">注册</a>
          </li>
          <li class="nav-item">
            <a class="btn btn-light" href="pages/login.html">登录</a>
          </li>
        </ul>

        <ul id="login-logined" class="navbar-nav ms-auto  d-none">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLinkRight" role="button"
              data-bs-toggle="dropdown" aria-expanded="false">
              <!-- after Ajax data : username -->
            </a>
            <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownMenuLinkRight">
              <li><a class="dropdown-item" href="pages/changePwd.html">修改密码</a></li>
              <hr class="dropdown-divider">
          </li>
          <li><a class="dropdown-item" onclick="logout()" href="#">登出</a></li>
        </ul>
        </li>
        </ul>
      </div>
    </div>
  </nav>

  <div class="container-fluid">
    <div class="mt-2 mb-2">
      <button id="reflash" class="btn btn-outline-dark">刷新</button>
      <button id="addBill" class="btn btn-outline-dark d-none">添加账单</button>
    </div>

    <div id="addBillFormBox" class="addBillFormBox">
      <form id="addBillForm">
        <div class="row mb-2">
          <div class="col">
            <label for="type" class="form-label">类型</label>
            <select class="form-select" id="type" name="type">
              <option selected>选择类型</option>
              <option value="收入">收入</option>
              <option value="支出">支出</option>
            </select>
          </div>
          <div class="col">
            <label for="date" class="form-label">日期</label>
            <input type="date" class="form-control" id="date" name="date">
          </div>
          <div class="col">
            <label for="amount" class="form-label">金额</label>
            <input type="number" class="form-control" id="amount" name="amount">
          </div>
        </div>
        <div class="row mb-2">
          <div class="col">
            <label for="statement" class="form-label">描述</label>
            <textarea class="mb-2 form-control" id="statement" name="statement" rows="2"></textarea>
            <button type="submit" class="btn btn-success col-12">添加</button>
          </div>
          <div class="col">
            <label for="notes" class="form-label">备注</label>
            <textarea class="form-control" id="notes" name="notes" rows="4"></textarea>
          </div>
        </div>

      </form>
    </div>

    <div class="card mt-3">
      <div class="card-header d-flex justify-content-between align-items-center">
        <span>账单
          <button type="button" name="deleteCheckedBtn" class="edit-col btn btn-danger btn-sm d-none" onclick="deleteChecked()">删除多选</button>
        </span>
        <button id="edit-btn" name="edit-btn" class="btn btn-secondary btn-sm">编辑</button>
      </div>
      <div class="card-body">
        <table class="table" id="billTable">
          <thead>
            <tr>
              <th scope="col" class="text-start edit-col d-none">
                <input title="全选" class="form-check-input" type="checkbox" id="checkAll" onclick="checkAll()" name="selectAll">
              </th>
              <th scope="col">#</th>
              <th scope="col">类型</th>
              <th scope="col">日期</th>
              <th scope="col">描述</th>
              <th scope="col">备注</th>
              <th scope="col">金额</th>
              <td scope="col" class="text-end edit-col d-none"></td>
            </tr>
          </thead>
          <tbody>
            <!-- after ajax data : billsData -->
          </tbody>
        </table>
        <div id="data-loading" class="loader d-none"></div>
      </div>
    </div>
  </div>

  <script src="../node_modules/jquery/dist/jquery.min.js"></script>
  <script src="../node_modules/js-cookie/dist/js.cookie.js"></script>
  <script src="./js/scrpt.js"></script>
  <script>
    // 页面加载完成后执行的函数
    $(document).ready(() => {
      let isFromLoginPage = getQueryParam('isFromLoginPage');
      if (isFromLoginPage === 'true') {
        loadBillData();
      }
      
      // 绑定"刷新"按钮点击事件
      $("#reflash").click(() => {
        loadBillData();
      });

      // 绑定"添加账单"按钮点击事件
      $("#addBill").click(() => {
        changeAddBillFormBoxStatus();
      });

      // 绑定被动判空事件
      $('#type').change(function() {
        isEmpty($(this), "选择类型");
      });
      $('#date').change(function() {
        isEmpty($(this), "");
      });
      $('#amount').change(function() {
        isEmpty($(this), 0);
      });

      $('#addBillForm').submit(function (event) {
        event.preventDefault();
        isFristSubmitAppend = false;
        // 主动判空
        if (isEmpty($('#type'), "选择类型") || isEmpty($('#date'), "") || isEmpty($('#amount'), 0)) {
          return;
        }
        // 判断金额为正数
        if ($('#amount').val() < 0) {
          $('#amount').addClass("is-invalid");
          return;
        }
        // 编辑提交数据
        var formData = {
          action: "append",
          data: {
            username: Cookies.get('username'),
            pic: Cookies.get('pic'),
            bill: {
              type: $('#type').val(),
              date: $('#date').val(),
              statement: $('#statement').val(),
              notes: $('#notes').val(),
              amount: Number($('#amount').val())
            }
          }
        };
        // 发送AJAX请求
        $.ajax({
          url: '/api/data',
          type: 'POST',
          data: JSON.stringify(formData),
          contentType: 'application/json',
          dataType: 'json',
          success: function (response) {
            loadBillData();
          },
          error: function (xhr, status, error) {
            // Handle login error
            console.error('Login failed: ' + error);
          }
        });
        // 异步操作，收起新增页面
        billBox_hide();
        // 清空表单内容
        $('#type').val("选择类型");
        $('#date').val("");
        $('#amount').val(0);
        $('#statement').val("");
        $('#notes').val("");
      });

      // 绑定编辑按钮点击事件
      $('#edit-btn').click(() => {
        toggleEditing();
      });

    });
  </script>

</body>